<template>
  <div class='m-apply'>
    <el-form :inline='true'>
      <el-form-item label='手机号码'>
        <el-input v-model.trim='search.phone' type='number' />
      </el-form-item>
      <!-- <el-form-item label='收款情况'>
        <a-select v-model='search.order' :options='payTypeList' />
      </el-form-item> -->
      <el-form-item label='销售人员'>
        <span style='padding-right: 10px'>{{ sellerName }}</span>
        <el-button size='small' type='primary' @click='showStaffDialoog'>选择销售人员</el-button>
      </el-form-item>
      <el-form-item label='选择课程'>
        <span style='padding-right: 10px'>{{ lessonName }}</span>
        <el-button size='small' type='primary' @click='showLessonDialog'>选择课程</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click='clearSearch'>清空</el-button>
        <el-button type='primary' @click='searchFun'>搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='180' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.$index)' v-if='scope.row.status === 1 && !selectOrders.map(v => v.order_id).includes(scope.row.order_id)' >选择</el-button>
            <el-button size='mini' @click='toSignUp(scope.row)'>详情</el-button>
            <el-button size='mini' @click='deleteApply(scope.row.order_id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收费（元）" min-width='100' >
        <template slot-scope="scope">{{ scope.row.payment }}</template>
      </el-table-column>
      <!-- <el-table-column align="center" label="收费形式" min-width='100' >
        <template slot-scope="scope">{{ scope.row.pay_type | getType }}</template>
      </el-table-column> -->
      <el-table-column align="center" label="收款状态" min-width='100' >
        <template slot-scope="scope">{{ scope.row.status | getStatus }}</template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 操作按钮 -->
      <div class='m-apply_bottomBtn'>
        <select-order @getData='updateSelectOrder' :selectOrders='selectOrders' @update='updateSelectOrders' />
        <el-button type='primary' @click='pay'>提交收款</el-button>
      </div>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <staff-dialog ref='staffDialog' @getData='getStaff' />
    <lesson-dialog ref='lessonDialog' @getData='getLessonTitle' />
    <pay-dialog ref='payDialog' :selectOrders='selectOrders' @update='updateList' />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import staffDialog from '@/components/business/StaffsDialog'
import lessonDialog from '@/module/business/course_detail_lessonDialog'
import selectOrder from '@/module/apply/SelectOrder'
import payDialog from '@/module/apply/PayDialog'
import { orderStatus } from '@/api/order'

export default {
  name: 'mApply',

  components: {
    staffDialog,
    lessonDialog,
    selectOrder,
    payDialog
  },

  data() {
    return {
      tableKeys: [
        { prop: 'buyer_phone', label: '手机号码', width: '140' },
        { prop: 'buyer_name', label: '客户名称', minWidth: '130' },
        { prop: 'order_name', label: '课程名称', minWidth: '130' },
        { prop: 'seller_name', label: '销售人员', minWidth: '130' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      // search
      search: {
        phone: '',
        seller: '',
        order: '',
        lessonId: ''
      },
      sellerName: '',
      lessonName: '',
      sellerList: [],
      payTypeList: [
        { label: '微信', value: '1' },
        { label: '支付宝', value: '2' },
        { label: '未收帐', value: '3' },
        { label: '公司公账', value: '4' },
        { label: '公司私账', value: '5' }
      ],
      // 订单
      selectOrders: []
    }
  },

  mounted() {
    // this.getStaffs()
    this.$refs.page.changePage()
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, args) {
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: { ...this.getRouterInfoAccordingName(type), ...args } })
    },

    async fetchData(aPageNum, aPageSize) {
      const params = {
        aMerchantId: this.aFirmId
      }
      const { phone, seller, lessonId, order } = this.search
      if (phone || phone === 0) params.aPhone = phone
      if (seller || seller === 0) params.aSellerId = seller
      if (order || order === 0) params.aOrderTypes = order
      if (lessonId || lessonId === 0) params.aGoodsId = lessonId
      return this.$api.orderGetList(params)
    },

    getData(data) {
      this.data = data
    },

    clearSearch() {
      this.sellerName = ''
      this.lessonId = ''
      Object.keys(this.search).forEach(v => {
        this.search[v] = ''
      })
      this.searchFun()
    },

    searchFun() {
      this.$refs.page.changePage()
    },

    toSignUp({ order_id }) {
      const query = { id: order_id, type: 'set' }
      this.routerPush('courseSignUp', { query })
      this.$router.push({ name: 'courseSignUp', query })
    },

    showStaffDialoog() {
      this.$refs.staffDialog.show()
    },

    showLessonDialog() {
      this.$refs.lessonDialog.show()
    },

    getLessonTitle({ id, name }) {
      this.lessonName = name
      this.search.lessonId = id
    },

    getStaff({ name, staff_id }) {
      this.search.seller = staff_id
      this.sellerName = name
    },

    choose(index) {
      // 查看是否有重复
      const willPushId = this.data[index].order_id
      const isHadSame = this.selectOrders.some(v => {
        return v.order_id === willPushId
      })
      if (isHadSame) return false
      this.selectOrders.push(this.data[index])
      console.log(this.selectOrders)
    },

    updateSelectOrder({ type, index }) {
      if (type === 'delete') {
        this.selectOrders.splice(index, 1)
      }
    },

    pay() {
      if (this.selectOrders.length === 0) {
        return this.__notify('警告', '请先订单', 'warning')
      }
      this.$refs.payDialog.show()
    },

    deleteApply(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该报名吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.orderDelete({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    updateList() {
      this.selectOrders = []
      this.searchFun()
    },

    updateSelectOrders(data) {
      if (!data.length) {
        this.selectOrders = []
      }
      data.forEach(v => {
        this.selectOrders.some((order, i) => {
          if (order.order_id === v) {
            this.selectOrders.splice(i, 1)
            return true
          }
          return false
        })
      })
    }
  },

  filters: {
    // getType(value) {
    //   let data = payType.filter(v => v.type === value)
    //   data = data[0] ? data[0].desc : '无'
    //   return data
    // },
    getStatus(value) {
      let data = orderStatus.filter(v => v.type === value)
      data = data[0] ? data[0].desc : '订单状态异常'
      return data
    }
  }
}
</script>

<style lang='less'>
.m-apply {
  &_bottomBtn {
    flex: 1;
    padding-top: 15px;
  }
}
</style>